<style lang="scss" src="./style/index.scss"></style>
<template>
    <div class="frame-page">
        <div class="frame-siderbar" :style="siderbarStyle">
            <asider></asider>
        </div>
        <div cw-role="cell" cw-valign="middle" class="frame-navbar">
            <div cw-role="cell" class="frame-navbar-item">
                <el-button cw-role="cell" cw-align="center" cw-valign="middle" type="primary" size="medium" class="minimize-siderbar">
                    <i class="ion ion-navicon"></i>
                </el-button>
            </div>
            <div cw-role="cell" cw-layout="fit" class="frame-navbar-item frame-navbar-head">
                控制面板
            </div>
            <div cw-role="cell" cw-valign="middle" class="frame-navbar-right-menu">
                <i class="ion ion-monitor pre-icon"></i>
                <span>网站首页</span>
            </div>
            <el-dropdown trigger="click">
                <div cw-role="cell" cw-valign="middle" class="el-dropdown-link frame-navbar-right-menu">
                    <i class="ion ion-android-person pre-icon"></i>
                    <span>管理员</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown" class="frame-navbar-drop">
                    <el-dropdown-item>
                        <i class="ion ion-locked"></i>
                        <router-link to="/">修改密码</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <i class="ion ion-power"></i>
                        <router-link to="/">注销</router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="frame-main">
            <router-view/>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import Asider from '../asider';
import {
    Dropdown,
    DropdownMenu,
    DropdownItem
} from 'element-ui';

Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

export default {
    name: 'Main',
    data() {
        return {
            siderbarStyle: {
                'background-image': 'url(' + require('../assets/images/login-bg.jpg') + ')',
                'background-size': 'cover'
            }
        };
    },
    components: {
        Asider
    }
};

</script>
